<template>
    <div>
            <div>
                <el-form  :model="form"  :inline="true" label-width="110px">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="用户名:" prop="username">
                                <el-input size="mini"
                                          :maxlength="8"
                                          :minlength="6"
                                          :disabled="(oStatus==='edit' || oStatus==='detail') ?true:false"
                                          v-model="form.username"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名:" prop="name">
                                <el-input size="mini" :maxlength="60" v-model="form.name" :disabled="oStatus=== 'detail' ?true:false"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="部门名称:" prop="depart">
                                <treeselect style="width: 170px;height: 15px; margin-top: 6px;" :disabled="oStatus=== 'detail' ?true:false" class="vueTreeSelectMini"
                                    v-model="form.depart" :multiple="false" :options="depData" placeholder="请选择"
                                            :normalizer="normalizer" @select="getPostList" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职务名称:" prop="post">
                                <el-select size="mini" style="width: 170px;" v-model="form.postId" multiple placeholder="请选择" :disabled="oStatus=== 'detail' ?true:false">
                                    <el-option
                                        v-for="item in postData"
                                        :key="item.postId"
                                        :label="item.name"
                                        :value="item.postId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="角色:" prop="role">
                                <el-select size="mini" style="width: 170px;" v-model="form.role" multiple placeholder="请选择" :disabled="oStatus=== 'detail' ?true:false">
                                    <el-option
                                        v-for="item in roleData"
                                        :key="item.roleId"
                                        :label="item.name"
                                        :value="item.roleId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱:" prop="email">
                                <el-input size="mini" :maxlength="18" :minlength="15" v-model="form.email" :disabled="oStatus=== 'detail' ?true:false"
                                          autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="手机:" prop="phone">
                                <el-input size="mini" :maxlength="18" :minlength="15" v-model="form.phone" :disabled="oStatus=== 'detail' ?true:false"
                                          autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="用户状态：" prop="status">
                                <template>
                                    <el-radio v-model="form.status" label="1" :disabled="oStatus=== 'detail' ?true:false">冻结</el-radio>
                                    <el-radio v-model="form.status" label="0" :disabled="oStatus=== 'detail' ?true:false">正常</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="center">
                <el-button size="mini" @click="close" >取 消</el-button>
                <el-button size="mini" type="primary" v-prevent-re-click @click="handleSave" :disabled="oStatus=== 'detail' ?true:false">确 定</el-button>
            </div>
<!--        <el-dialog-->
<!--            title="提示"-->
<!--            :visible.sync="dialogVisible"-->
<!--            width="30%">-->
<!--            <span>确认修改信息</span>-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--               <el-button @click="close">取 消</el-button>-->
<!--               <el-button type="primary" @click="handleSave">确 定</el-button>-->
<!--            </span>-->
<!--        </el-dialog>-->
    </div>
</template>

<script type="text/ecmascript-6">
    import Treeselect from '@riophae/vue-treeselect'
    import ajax from '@api/ajax'
    import {QUERY_ROLE_INFO, USER_OPERATE, QUERY_POST_INFO, QUERY_DEP_INFO} from '@api/url'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import '@asst/css/treeselectstyle.css'

    export default {
        name: 'UserForm',
        data () {
            return {
                oStatus: '',
                title: '',
                form: {},
                postData: [],
                roleData: {},
                depData: {},
                search1: {},
                userAddForm: false,
                dialogVisible: false
            }
        },
        components: {
            Treeselect
        },
        watch: {
            'form.depart': 'currDeptChange'

        },
        methods: {
            normalizer (node) {
                return {
                    id: node.departId,
                    label: node.name,
                    children: node.children
                }
            },
            // 用户新增弹框初始化
            showUserDialog (data, status) {
                debugger
                this.oStatus = status
                this.userAddForm = true
                this.form = Object.assign({}, data)
                if (this.form.postId) {
                    this.form.postId = data.postId.split(',')
                }
                if (this.form.role) {
                    this.form.role = data.role.split(',')
                }
                if (this.form.depart === '') {
                    this.form.depart = null
                }
            },

            // 确认修改后调用的方法
            handleSave () {
                this.dialogVisible = false
                if (this.oStatus === 'edit') {
                    this.form.optMode = 'U'
                } else if (this.oStatus === 'add') {
                    this.form.optMode = 'A'
                }
                if (this.form.postId) {
                    if (this.form.postId.length !== 0) {
                        this.form.postId = this.form.postId.join(',')
                    } else {
                        this.form.postId = ''
                    }
                } else {
                    this.form.postId = ''
                }
                if (this.form.role) {
                    if (this.form.role.length !== 0) {
                        this.form.role = this.form.role.join(',')
                    } else {
                        this.form.role = ''
                    }
                } else {
                    this.form.role = ''
                }
                if (this.form.status) {
                    this.form.status = this.form.status
                } else {
                    this.form.status = '0'
                }
                ajax.post(USER_OPERATE, this.form).then(res => {
                    this.$message.success('操作成功!')
                    this.userAddForm = false
                    this.$emit('saved', this.userAddForm)
                    this.close()
                }).catch(err => {
                    console.error('用户列表查询错误！', err)
                })
            },
            // 获取角色列表
            getRoleList () {
                ajax.post(QUERY_ROLE_INFO).then(res => {
                    this.roleData = res.data
                }).catch(err => {
                    console.error('查询错误！', err)
                })
            },
            // 获取职务列表
            getPostList (node) {
                ajax.post(QUERY_POST_INFO, {departId: node.departId}).then(res => {
                    this.postData = res.data || []
                }).catch(err => {
                    console.error('查询错误！', err)
                })
            },
            // 部门变化后调用的方法
            currDeptChange (val) {
                if (val) {
                    let a = {}
                    a.departId = val
                    this.getPostList(a)
                } else {
                    this.form.postId = ''
                    this.postData = []
                }
            },
            // 获取部门列表
            getDepList () {
                debugger
                ajax.post(QUERY_DEP_INFO).then(res => {
                    let tree = this.translateDataToTree(res.data || [])
                    this.depData = tree
                }).catch(err => {
                    console.error('查询错误！', err)
                })
            },
            // 将数据转换为tree
            translateDataToTree (data) {
                // 没有父节点的数据
                let parents = data.filter(value => value.parentId === 'undefined' || value.parentId === '0')
                // 有父节点的数据
                let children = data.filter(value => value.parentId !== 'undefined' && value.parentId !== '0')
                // 定义转换方法的具体实现
                let translator = (parents, children) => {
                    // 遍历父节点数据
                    parents.forEach((parent) => {
                            // 遍历子节点数据
                            children.forEach((current, index) => {
                                    // 此时找到父节点对应的一个子节点
                                    if (current.parentId === parent.departId) {
                                        // 对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
                                        let temp = JSON.parse(JSON.stringify(children))
                                        // 让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
                                        temp.splice(index, 1)
                                        // 让当前子节点作为唯一的父节点，去递归查找其对应的子节点
                                        translator([current], temp)
                                        // 把找到子节点放入父节点的children属性中
                                        typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
                                    }
                                }
                            )
                        }
                    )
                }
                // 调用转换方法
                translator(parents, children)
                // 返回最终的结果
                return parents
            },
            // 确认操作后调用的方法
            bout () {
                if (this.oStatus === 'edit') {
                    this.dialogVisible = true
                }
                if (this.oStatus === 'add') {
                    this.form.optMode = 'A'
                    if (this.form.postId) {
                        if (this.form.postId.length !== 0) {
                            this.form.postId = this.form.postId.join(',')
                        } else {
                            this.form.postId = ''
                        }
                    } else {
                        this.form.postId = ''
                    }
                    if (this.form.role) {
                        if (this.form.role.length !== 0) {
                            this.form.role = this.form.role.join(',')
                        } else {
                            this.form.role = ''
                        }
                    } else {
                        this.form.role = ''
                    }
                    if (this.form.status) {
                        this.form.status = this.form.status
                    } else {
                        this.form.status = '0'
                    }
                    ajax.post(USER_OPERATE, this.form).then(res => {
                        this.$message.success('操作成功!')
                        this.userAddForm = false
                        this.$emit('saved', this.userAddForm)
                        this.close()
                    }).catch(err => {
                        console.error('用户列表查询错误！', err)
                    })
                }
            },
            // 关闭页面调用的方法
            close () {
                this.userAddForm = false
                this.dialogVisible = false
                this.$emit('saved', this.userAddForm)
            }
        },
        mounted () {
            this.getRoleList()
            this.getDepList()
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">/* mini */
.vueTreeSelectMini .vue-treeselect__control {
  height: 26px !important;
}
.vueTreeSelectMini .vue-treeselect__control .vue-treeselect__value-container {
  height: 26px !important;
  display: block !important;
}
.vueTreeSelectMini
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__placeholder {
  line-height: 26px !important;
  font-size: 12px !important;
}
.vueTreeSelectMini
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__single-value {
  line-height: 26px !important;
  font-size: 12px !important;
}

/* small */
.vueTreeSelectSmall {
  height: 36px;
  display: flex;
  align-items: center;
}
.vueTreeSelectSmall .vue-treeselect__control {
  height: 30px !important;
}
.vueTreeSelectSmall .vue-treeselect__control .vue-treeselect__value-container {
  height: 30px !important;
  display: block !important;
}
.vueTreeSelectSmall
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__placeholder {
  line-height: 30px !important;
  font-size: 14px !important;
}
.vueTreeSelectSmall
  .vue-treeselect__control
  .vue-treeselect__value-container
  .vue-treeselect__single-value {
  line-height: 30px !important;
  font-size: 14px !important;
}
</style>
